<template>
    <div class="con">
        <div class="header">
            <!-- 上半部分 -->
            <div class="hed_top">
                <ul>
                    <li>{{shopObj.name}}</li>
                    <li> <van-rate v-model="shopObj.score" color="#ffd21e" allow-half /> (661) 月销{{shopObj.sellCount}}单</li>
                </ul>
                <ul>
                    <li><van-icon :name="flag?'like':'like-o'" color="#ee0a24" @click="flag=!flag"/></li>
                    <li class="sc">{{flag?'已收藏':'收藏'}}</li>
                </ul>
            </div>
            <!-- 下半部分 -->
            <div class="hed_btm">
                <ul>
                    <li>起送价</li>
                    <li>商家配送</li>
                    <li>平均配送时间</li>
                </ul>
                <ul class="aa">
                    <li>{{shopObj.minPrice}}<span>元</span></li>
                    <li>{{shopObj.deliveryPrice}}<span>元</span></li>
                    <li>{{shopObj.deliveryTime}}<span>分钟</span></li>
                </ul>
            </div>
        </div>
        <div class="footer">
         <ul>
            <li>获取与公告</li>
            <li>{{shopObj.bulletin}}</li>
         </ul>
            
        </div>
    </div>
</template>

<script lang="ts">
import {shopEntity} from '../../components/comheader/shop';
import { defineComponent } from 'vue'
import {api_queryShop} from '../../api/shop';
export default defineComponent({
    setup () {
        const shopList=reactive(new shopEntity());
        const query=async()=>{
            let rst =await api_queryShop();
            console.log(rst);
            shopList.shopObj=rst.data;
            console.log(shopList.shopObj);
            
        }
        query();
        const flag=ref(false);

        return {...toRefs(shopList),flag}
    }
})
</script>

<style lang="scss" scoped>
.con{
    height: 100%;
    background-color: #F4F5F7;
    display: flex;
    flex-direction: column;
    ::v-deep(.van-icon-like-o){
        font-size: 30px;
    }
    .header{
      flex: 0 0 130px;
        background-color: white;
        display: flex;
        flex-direction: column;
    }
    .hed_top{
        margin-top: 10px;
        display: flex;
        justify-content: space-around;
        ul>li{
            margin-bottom: 10px;
            
        }
        .sc{
                font-size: 10px;
                color: #ddd;
            }
    }
    .hed_btm{
        display: flex;
        flex-direction: column;
        ul{
            display: flex;
             justify-content: space-evenly;
             align-items: center;
        }
        .aa{
            font-size: 25px;
            margin-top: 10px;
            li:nth-child(1){
                margin-left: -25px;
            }
            span{
                font-size: 5px;
                color: #ddd;
            }
        }
    }
    .footer{
        margin-top: 30px;
        flex: 1;
        background-color: #fff;
        ul{
            margin-left: 20px;
        }
        ul>li:nth-child(1){
            margin: 15px 0;
            font-size: 20px;
        }
        ul>li:nth-child(2){
            font-size: 15px;
            color: #f50;
        }
    }
}
::v-deep(.van-icon-like){
    font-size: 28px;
}
</style>